div {
  position: relative;
  width: 600px;
  height: 100px;
  margin: 5vmin auto 15vmin;
  background: hsl(48, 100%, 50%);
  border-radius: 20px;
  box-shadow: 0 0 5px 2px hsl(48, 100%, 45%);
}
.g-left::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  bottom: 0;
  background: hsl(48, 100%, 20%);
  border-radius: 10px;
  transform-origin: center center;
  transform: translate(0, -15%) rotate(-4deg);
  box-shadow: 0 0 20px 15px hsl(48, 100%, 20%);
  z-index: -1;
}
.g-both {
  background: hsl(199, 98%, 48%);
  box-shadow: 0 0 5px 2px hsl(199, 98%, 40%);
}
.g-both::before,
.g-both::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  bottom: 15%;
  border-radius: 10px;
  box-shadow: 0 0 20px 15px hsl(199, 98%, 20%);
  transform-origin: center center;
  background: hsl(199, 98%, 20%);
  z-index: -1;
}
.g-both::before {
  transform: translate(0, -20%) rotate(-4deg);
}
.g-both::after {
  transform: translate(0, -20%) rotate(4deg);
}
.g-slide {
  background: hsl(150, 62%, 52%);
  box-shadow: 0 0 5px 2px hsl(150, 100%, 40%);
}
.g-slide::before,
.g-slide::after {
  content: '';
  position: absolute;
  top: 15%;
  bottom: 20%;
  border-radius: 10px;
  background: hsl(150, 62%, 20%);
  transform-origin: center center;
  box-shadow: 0 0 10px 7px hsl(150, 62%, 20%);
  z-index: -1;
}
.g-slide::before {
  left: 90%;
  right: 5%;
  transform: translate(105%, 10%) rotate(15deg);
}
.g-slide::after {
  left: 5%;
  right: 90%;
  transform: translate(-105%, 10%) rotate(-15deg);
}
